<template>
	<view class="cardstyle" :class="{'top-card': isTop}" :style="{'background-color': bgColor}">
		<!-- 标题+单图区域-->
		<view class="titlebox">
			<!-- 单图模式 -->
			<view class="imgbox" v-if="cardType === 'image' && image">
				<image :src="showImage" mode="aspectFill" @error="handleImageError()"></image>
			</view>
			<!-- 标题文本 -->
			<view class="title-text">
				<text v-if="cardType === 'ad'" style="color: #aaa;">{{title}}</text>
				<text v-else>{{title}}</text>
			</view>
		</view>
		
		<!-- 多图广告区域 -->
		<view class="adbox" v-if="(cardType === 'ad' || cardType === 'images') && images.length > 0">
			<image 
				v-for="(img, index) in images" 
				:key="index"
				:src="img" 
				mode="aspectFill"
				@error="handleMultiImageError(index)"
			></image>
		</view>
		
		<!-- 广告信息（对应参考组件 adbox 文字） -->
		<view class="ad-info" v-if="cardType === 'ad'">
			<text class="ad-tag">{{adTag || '广告'}}</text>
			<text class="ad-desc" v-if="adInfo">{{adInfo}}</text>
		</view>
		
		<!-- 底部信息区域 -->
		<view class="tipsbox">
			<text class="top-tag" v-if="isTop">置顶</text>
			<text class="ad-label" v-if="cardType === 'ad'">广告</text>
			<text class="author">{{author}}</text>
			<text class="comments" v-if="cardType !== 'ad'">{{comments}}评</text>
			<view class="time-container">
				<text class="time">{{time}}</text>
			</view>
		</view>
		
		<!-- 插槽区域（参考组件搜索插槽样式） -->
		<slot name="tips" v-if="showSearch"></slot>
	</view>
</template>

<script>
	export default {
		name: "cardViewText",
		props: {
			title: {
				type: String,
				default: "新闻标题",
				required: true
			},
			isTop: {
				type: Boolean,
				default: false,
				required: true
			},
			author: {
				type: String,
				default: "来源",
				required: true
			},
			comments: {
				type: Number,
				default: 0,
				required: true
			},
			time: {
				type: String,
				default: "2023.10.29"
			},
			cardType: {
				type: String,
				default: "text" // text, image, ad, images
			},
			image: {
				type: String,
				default: ""
			},
			images: {
				type: Array,
				default: () => []
			},
			adTag: {
				type: String,
				default: ""
			},
			adInfo: {
				type: String,
				default: ""
			},
			showSearch: {
				type: Boolean,
				default: false
			},
			bgColor: {
				type: String,
				default: '#fff'
			}
		},
		data() {
			return {
				defaultPic: "/static/default-image.png", // 默认图片
				failPic: "/static/fail-image.png"       // 加载失败图片
			}
		},
		computed: {
			// 处理单图显示
			showImage() {
				if (this.image) {
					return this.image;
				} else {
					return this.defaultPic;
				}
			}
		},
		methods: {
			// 单图加载失败处理
			handleImageError() {
				console.log('单图加载失败，替换为默认图', this.title);
				// 由于 image 是 props，无法直接修改，通过计算属性间接处理
				// 若需强制替换，可通过 $emit 通知父组件，此处沿用参考组件的失败图逻辑
				this.$set(this, 'image', this.failPic);
			},
			// 多图加载失败处理（参考组件 handleImageError 逻辑）
			handleMultiImageError(index) {
				console.log(`多图第${index}张加载失败，替换为默认图`, this.title);
				this.$set(this.images, index, this.failPic);
			}
		}
	}
</script>

<style scoped>
.cardstyle {
	display: flex;
	flex-direction: column;
	text-align: left;
	border-radius: 12rpx;
	padding: 20rpx;
	margin: 20rpx;
	box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.08);
	border: 1rpx solid #f0f0f0;
}

/* 置顶卡片样式 */
.top-card {
	/* border-left: 8rpx solid #ff6b6b; */
	background-color: rgb(255, 248, 248);
}

/* 标题+单图布局（参考组件 titlebox 样式） */
.titlebox {
	display: flex;
	flex-direction: row;
	align-items: center;
	margin-bottom: 15rpx;
	padding-left: 10rpx;
}

.imgbox {
	margin-right: 20rpx;
}

/* 图片尺寸（参考组件 100px=200rpx，70px=140rpx） */
.imgbox image, .adbox image {
	width: 200rpx;
	height: 140rpx;
	border-radius: 10rpx;
}

.title-text {
	flex: 1;
}

.titlebox text {
	font-size: 32rpx;
	font-weight: bold;
	color: #333333;
	line-height: 1.5;
}

/* 多图广告布局（参考组件 adbox 样式） */
.adbox {
	display: flex;
	flex-direction: row;
	justify-content: space-around;
	margin-bottom: 15rpx;
}

/* 广告信息样式 */
.ad-info {
	margin-bottom: 15rpx;
	padding: 15rpx;
	/* background-color: #f8f8f8; */
	border-radius: 8rpx;
}

.ad-tag {
	font-size: 24rpx;
	color: #ff6600;
	background-color:#fff0f0;
	padding: 4rpx 12rpx;
	border-radius: 4rpx;
	margin-right: 15rpx;
}

.ad-desc {
	font-size: 26rpx;
	color: #666;
}

.ad-label {
	color: #00f;
	margin-right: 20rpx;
	font-size: 24rpx;
}

/* 底部信息区域 */
.tipsbox {
	display: flex;
	align-items: center;
	font-size: 24rpx;
	color: #999999;
	padding-left: 10rpx;
	margin-top: 5rpx;
}

.top-tag {
	color: #ff0000;
	font-weight: bold;
	margin-right: 20rpx;
	background-color: #fff0f0;
	padding: 4rpx 12rpx;
	border-radius: 6rpx;
}

.author {
	margin-right: 20rpx;
}

.comments {
	margin-right: 20rpx;
}

.time-container {
	flex: 1;
	display: flex;
	justify-content: flex-end;
}

.time {
	color: #666666;
}
</style>